<template>
  <div class="app-container">
    <el-form label-width="200px">
      <el-row>
        <div class="top-box">
          <div class="box">
            <el-form-item
              v-for="item in item"
              v-if="item.value"
              :key="item._id"
              :label="item.name">
              {{ item.value }}
            </el-form-item>
          </div>
        </div>
      </el-row>
    </el-form>
    <div class="title">订单信息</div>
    <el-form label-width="200px">
      <el-row>
        <el-form-item
          v-for="item in order"
          :key="item._id"
          :label="item.name">
          {{ item.value }}
        </el-form-item>
      </el-row>
    </el-form>
    <div class="title">商家信息</div>
    <el-form label-width="200px">
      <el-row>
        <el-form-item
          v-for="item in business"
          :key="item._id"
          :prop="item.value"
          :label="item.name">
          {{ item.value }}
        </el-form-item>
      </el-row>
    </el-form>
    <div class="title">服务信息</div>
    <el-form label-width="200px">
      <el-row>
        <el-form-item
          v-for="item in service"
          :key="item._id"
          :prop="item.value"
          :label="item.name">
          {{ item.value }}
        </el-form-item>
      </el-row>
    </el-form>
    <el-button type="info" @click="back">返回</el-button>
  </div>
</template>

<script>
import { validateOrderStatus,trade,payType } from '@/utils/validate'
import { formatDate } from '@/utils/index'
import request from '@/utils/request'
export function getList(mes) {
  return request({
    url: '/v1/admin/order',
    method: 'post',
    data: mes
  })
}
export default {
  data(){
    return{
      form: [],
      item: '',
      order: '',
      business: '',
      service: ''
    }
  },
  created: function () {
    const n = JSON.parse(localStorage.getItem('refundMes'))
    console.log(n);
    const item = [
      { name: '交易状态', value: trade(n.order_status) },
      { name: '退款账户', value: n.enterprise_opening_bank || '--' },
      { name: '退款金额', value: n.order_money },
    ]
    const order = [
      { name: '用户昵称', value: n.user_id.nickname },
      { name: '服务地址', value: n.order_time ? formatDate(new Date(n.order_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '联系人', value: n.user_id.nickname },
      { name: '联系方式', value: n.user_id.user_phone || '--' },
    ]
    const business = [
      { name: '订单编号', value: n.order_sn || '--' },
      { name: '打赏时间', value: '' },
      { name: '下单时间', value: n.order_time ? formatDate(new Date(n.order_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '支付方式', value: payType(n.order_pay_type) },
      { name: '支付时间', value: n.pay_time ? formatDate(new Date(n.pay_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
    ]
    const service = [
      { name: '服务标题', value: n.service_title || '--' },
      { name: '服务时间', value: n.service_time ? formatDate(new Date(n.service_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '订单金额', value: n.order_money.toString() },
      { name: '实付金额', value: n.order_pay_money.toString() },
    ]
    this.item = item
    this.order = order
    this.business = business
    this.service = service
    console.log(n.order_money);
  },
  methods: {
    exportExcel() {
      Excel('#out-table')
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin: 0;
  }
  .el-steps{
    margin: 20px 0;
  }
  .title {
    line-height: 30px;
    font-weight: bold;
    border-left: 5px solid #a2c33d;
    padding-left: 10px;
    margin: 5px;
  }
  .top-box{
    background: #eaf4fd;
    border: 1px solid #d4e4f3;
    display: flex;
    flex-wrap: wrap;
  }
  .box{
    width: 45%;
  }
  .state{
    width: 10%;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }
  .footer{
    line-height: 30px;
    font-weight: 600;
    margin-top: 20px;
    border-bottom: 1px solid #d4d4d4;
  }
  .footer div{
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .footer div:hover{
    background: #d4e4f3;
  }
  .two{
    display: none;
  }
  .footer .active{
    background: #d4e4f3;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
</style>
